const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");//动态生成html
const TerserPlugin = require("terser-webpack-plugin");// 压缩js
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin');
module.exports = {
    entry: path.join(__dirname, "/src/index.tsx"),// 入口文件
    output: {
        path: path.join(__dirname, '/dist'),//打包路径
        filename: "bundle@[chunkhash].js",//打包文件名,防止浏览器缓存，动态根据内容生成chunkhash
        clean: true, // 每次打包时，删除之前的包
        publicPath: "/",//设置静态资源访问目录 会从index.html目录加载其他资源，此时是无法拿到的，因为file找不到，需要配置本地服务器
    },
    module: {
        rules: [
            {
                test: /\.tsx|ts$/,
                use: [
                    {
                        loader: "cache-loader",
                        options: {
                            cacheDirectory: path.join(__dirname, 'node_modules/.cache/cache-loader')
                        }
                    },
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                '@babel/preset-env',// 将js转换为es5
                                '@babel/preset-react'// react需引用的转换包
                            ]
                        }
                    },
                    {
                        loader: "ts-loader",// 将ts转换为js
                    }
                ]
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|webp)$/i,// i代表大小写不区分
                type: 'javascript/auto',//声明js模块类型，避免重复生成
                use: [
                    {
                        loader: 'url-loader',//设置图片资源存储目录，加载的url以及转换为base64，减少资源请求
                        options: {
                            esModule: false,// 禁止转换为es6module
                            limit: 1024,//小于10kb的图片转换为base64格式，当大于liemit 使用file-loader
                            name: '[name].[ext]',//设置文件名
                            outputPath: "static/images/",//设置存储目录
                        },
                    },
                ]
            }
        ]
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js']// 打包文件后缀设置
    },
    plugins: [
        // 动态生成html文件
        new HtmlWebpackPlugin({
            title: "react手写打包配置1",// 定义标题
            'meta': {
                'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',// 定义视口
            },
            filename: "index.html",//文件名
            favicon: path.join(__dirname, '/src/assets/images/favicon.ico'),// 配置网站图标位置
            template: path.join(__dirname, '/public/index.html'), //配置生成的html模板
            inject: 'body',//将script插入到body中，以此避免阻塞dom渲染
        }),
        // 压缩css
        new CssMinimizerPlugin(),
    ],
    // 优化
    optimization: {
        minimize: true,// 开启压缩
        minimizer: [
            new TerserPlugin({// 压缩js
                    terserOptions: {
                        output: {
                            comments: false,// 删除注释
                        },
                        compress: {
                            // pure_funcs: ['console.log']//生产环境下生效
                        }
                    }
                }
            ),
            // 图片压缩
            new ImageMinimizerPlugin({
                minimizer: {
                    implementation: ImageMinimizerPlugin.imageminMinify,//压缩模式
                    filter: source => { // 返回true，压缩，反之不压缩
                        if (source.byteLength < 1024) {
                            return false;
                        }
                        return true;
                    },
                    options: {
                        plugins: [
                            "imagemin-pngquant",
                            "imagemin-mozjpeg",
                            "imagemin-gifsicle",
                            "imagemin-gifsicle",
                            "imagemin-svgo",
                            "imagemin-webp",
                        ]
                    }
                }
            }),

        ],
        // 提取公共模块
        splitChunks: {
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,//模块目录
                    name: "vendors",//缓存组名字
                    filename: 'vendors[contenthash].js',//打包文件名
                    chunks: 'all',//对所有类型的模块生效
                    reuseExistingChunk: true,// 重用已存在的共享模块
                },
                custom: {
                    test: /[\\/]src[\\/]/,//模块目录
                    name: "custom",
                    filename: "custom[contenthash].js",//打包文件名
                    chunks: 'all',
                    reuseExistingChunk: true, //重用已存在的共享模块
                }
            }
        },
    },
}
